﻿@page "/components/simpletable"
@page "/components/MudSimpleTable"

<DocsPage>
    <DocsPageHeader Title="Simple Table" />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Simple">
                <Description>
                    Inside the component, you can use all the regular table elements such as <CodeInline Code="<thead>" />, <CodeInline Code="<tbody>" />, <CodeInline Code="<tr>" />, <CodeInline Code="<th>" /> or <CodeInline Code="<td>" />.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(SimpleTableExample)" ShowCode="false" Block="true" FullWidth="true">
                <SimpleTableExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Hover & Dense">
                <Description>
                    Simple Table also supports hover and dense options.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(SimpleTableHoverDenseExample)" ShowCode="false" Block="true" FullWidth="true">
                <SimpleTableHoverDenseExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Fixed header">
                <Description>
                    Set <CodeInline>FixedHeader="true"</CodeInline> to make the header sticky when scrolling the table. The table will scroll if you set style to <CodeInline>height:300px;</CodeInline>, for instance.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(SimpleTableFixedHeaderExample)" ShowCode="false" Block="true" FullWidth="true">
                <SimpleTableFixedHeaderExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>